<template>
    <Teleport to="#before-navigation" v-if="targetExists">
        <ProfileCard :isShowUserPicture="false"></ProfileCard>
    </Teleport>
    <div class="course-list-card card-box">
        <h5 class="card-title">
            <el-icon size="20" color="#f06423"><Notebook /></el-icon>
            {{ $t('my.index.course_overview') }}
        </h5>
        <div class="card-text">
            <div class="filter-list">
                <el-dropdown trigger="click" :teleported="false">
                    <el-button color="#2F3C45">
                        <el-icon size="16" color="#fff"><Sort /></el-icon>
                        {{ $t('my.index.course_name') }}
                        <el-icon size="16" color="#fff"><CaretBottom /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>{{ $t('my.index.course_name') }}</el-dropdown-item>
                            <el-dropdown-item>{{ $t('my.index.last_accessed') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="list" v-loading="courseListLoading">
                <RouterLink :to="`/console/course/${courseItem.id}`" class="item" v-for="courseItem in courseList" :key="courseItem.id">
                    <div class="pic">
                        <img class="ele" :src="courseItem.image_url" alt="" />
                    </div>
                    <div class="info">
                        <div class="tit-more-opr">
                            <span class="tit">{{ courseItem.name }}</span>
                            <el-dropdown :teleported="false" placement="bottom-end">
                                <el-icon size="16" color="#4c4c4c"><MoreFilled /></el-icon>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>{{ $t('my.index.mark_star') }}</el-dropdown-item>
                                        <el-dropdown-item>{{ $t('my.index.hide_course') }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                        <div class="time">{{ $t('my.index.from') }}: {{ formatLoginTime(courseItem.start_date) }}</div>
                        <div class="time">{{ $t('my.index.to') }}: {{ formatLoginTime(courseItem.end_date) }}</div>
                    </div>
                </RouterLink>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import ProfileCard from '@/components/ProfileCard.vue'

import CourseService from '@/api/course'
import type { CourseItem } from '@/types/course'

import { formatLoginTime } from '@/utils/global'

const targetExists = ref(false)

// 课程列表
const courseList = ref<CourseItem[]>([])
const courseListLoading = ref(false)
function getCourseList() {
    CourseService.listToPersonal().then(res => {
        courseList.value = res
    })
}

onMounted(() => {
    getCourseList()
    targetExists.value = !!document.querySelector('#before-navigation')
})
</script>

<style lang="less" scoped>
.course-list-card {
    .filter-list {
        margin-bottom: 15px;
        padding: 8px;
        background-color: rgba(0, 0, 0, 0.072);
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        width: 100%;

        .item {
            width: calc(50% - 15px);

            &:hover {
                .pic {
                    &::before,
                    &::after {
                        height: 50%;
                    }
                }
            }

            .pic {
                width: 100%;
                position: relative;

                &::before,
                &::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    background-color: rgba(0, 0, 0, 0.2);
                    transition: height 0.35s ease-in-out;
                    display: block;
                    height: 0;
                }

                &::before {
                    top: 0;
                }

                &::after {
                    bottom: 0;
                }
            }

            .info {
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                padding: 10px;
                color: #4c4c4c;
                font-size: 15px;
                line-height: 1.66;

                .tit-more-opr {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .el-icon {
                        transition: color 0.35s ease-in-out;
                        cursor: pointer;

                        &:hover {
                            color: #f06423;
                        }
                    }
                }
            }
        }
    }
}
</style>
